<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet"  href="css/bootstrap-3.3.7/dist/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="css/shoppingcss.css" />
		<script src="js/jquery-3.2.0.min.js"></script>
		<style>
			body{
				text-align: center;
			}
			
			div .first{
				border-bottom: 1px solid #C0C0C0;
			}
			
			h3{
				text-align: left;
				margin: 30px auto;
			}
			
		#goodslist span{
			    float:left;
			    display:inline-block;
				width:20%;
				height:20px;
				text-align:left;
			}
			
		.form span{
			float: left;
			width: 20%;
			height: 20%;
			text-align: left;
		}	
		
		#goodslist li{
			   line-height: 50px;				
			   list-style: none;
			   height:70px;
			   border: 1px solid #C0C0C0;
			}
			
		.form ul li{
			height: 10px;
		}
		
		ul{
			padding: 0;
		}
			
		li.oushu{
			background-color:#8699A4;
		}
		
		li.qishu{
			background-color:#66AFE9;
		}
		
		a{
			color: #000000;
		}	
		</style>
	</head>
	<body>
		<div class="container main">
			<div class="row first">
				<div class="col-lg-2 col-sm-2">
					<a href="index.html"><img src="img/logo.jpg" style="height: 50px;"/></a>
				</div>
				<div class="col-lg-8 col-sm-8">	
				</div>
				<div class="col-lg-2 col-sm-2">
					<form action=""></form>
					<a href="shoppingcart.html"><button class="btn btn-default btn-sm">购物车</button></a>
				</div>
			</div>
		
			<h3>购物信息</h3>
			<div class="form">
				<ul>
					<li>
						<span>ID</span>
						<span>品牌</span>
						<span>总价</span>
						<span>数量</span>
					</li>
				</ul>
					
				
			</div>
			<div id="goodslist"></div>
		</div>
		<script>
			window.onload=function(){
				$.ajax({
					type:"post",
					url:"ShoppingServelet",
					async:true,
					success:function(data){
						var goodsObj=jQuery.parseJSON(data); //将data转为JSON对象
						var html="<ul>";
						var j=0;
						$.each(goodsObj, function(i,obj) {
							j++;
							if(i%2==0){
								html+="<li class='oushu' id='" + obj.id + "'>" + "<span id='" + j + "'>"+j+"</span><span id='"+obj.name
								    + "'>"+obj.name+"</span><span id='" + obj.price + "'>"+obj.price+"</span><span id='" + obj.num + "'>"+obj.num+"</span><a href='#'>删除</a>";
								    + "</li>"
							}else{
								html+="<li class='qishu' id='" + obj.id + "'>" + "<span id='" + j + "'>"+j+"</span><span id='"+obj.name
							    + "'>"+obj.name+"</span><span id='" + obj.price + "'>"+obj.price+"</span><span id='" + obj.num + "'>"+obj.num+"</span><a href='#'>删除</a>";
							    + "</li>"
							}
						});
						html+="</ul>";
						$("#goodslist").append(html);//将html放到div里面				
					}
				});	
				
				$("#goodslist").bind("click",event,function(){	//这里当点击button时，button，li ul这些元素还没有生成，如果没有找到，则找父元素li，如果没有找到li则又继续找父元素ul，然后又到div，直到找到父元素又为止	
						var li=event.target;
						var id=$($(li).parent().get(0)).attr("id");
						var num=$($(li).siblings().get(3)).text();
						console.log(id+","+num);
						
						$.ajax({
								type:"post",
								url:"DeleteServelet",
								async:true,
								data:{"id":id,"num":num},
								success:function(){	
									window.location.reload();
								}
							});
					});
//					$(".delete").click(function(){
//						var id=$($(li).siblings().get(0)).text();
//						var num=$($(li).siblings().get(3)).text();
//						$.ajax({
//							type:"get",
//							url:"DeleteServelet",
//							async:true,
//							data:{"id":id,"num":num},
//							success:function(){
//								
//							}
//						});
//					})
			}
		</script>
	</body>
</html>
